<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册登录页面</title>
    <style>
        *{margin: 0; padding: 0;}
        a{text-decoration: none;}
        body{
            width: 100%;
            height: auto;
            background: url('../img/zcbj.jpg') no-repeat top center;
            background-size: 1920px auto;
        }
        /* 导航开始 */
        .zhuce_nav{
            width: 100%;
            height: 108px;
            border-bottom:1px solid rgba(255,255, 255, 0.08);
        }
        .nav{
            width: 1200px;
            height: 108px;
            /* background-color: red; */
            margin: 0 auto;
        }
        .logo{
            width: 200px;
            height: 108px;
            /* background-color: aqua; */
            float: left;
        }
        .logo img{
            width: 200px;
            height: 108px;
        }
        .main_nav{
            width: 748px;
            height: 108px;
            float: right;
           
        }
        .main_nav li{
            display: inline-block;
            height: 108px;
        }
        .main_nav li a{
            display:inline-block;
            /* width: 112px; */
            height: 108px;
            padding: 0 17px;
            line-height: 108px;
            text-align: center;
            color: white;
            font-size: 18px;
            opacity: 0.7;
        }
        .main_nav li a:hover{
            opacity: 1;
          text-decoration: underline;
        }
       
        /* 导航结束 */

        /* 登陆注册div   开始 */
        .reg{
            width: 600px;
            height: 555px;
            background-color: white;
            margin: 0 auto;
            border: 1px solid black;
            border-radius: 25px;
        }
        /* 登录注册  结束 */

        /* 标题开始 */
        .title{
            width:1280px;
            height: 180px;
            font-size: 3rem;
            color: white;
            text-align: center;
            line-height: 180px;
            margin: 0 auto;
        }
      
        .reg_center{
            width: 480px;
            height: 366px;
            margin: 0 auto;
            color: gray;
        }
        .reg_title{
            width: 480px;
            height: 98px;
            /* background-color: red; */
            text-align: center;
            font-size: 24px;
            line-height: 98px;
        }
        .reg_title a{
           color: black;
            padding: 0 10px;
            font-weight: 600;
            opacity: 0.3;
        }
        .reg_title a:hover{
            opacity: 1;
            text-decoration: underline;
        }
        .reg_title a:focus{opacity: 1;}
        
        /* 标题结束 */

        /* 注册开始 */
        .shuru form{
            width: 480px;
            height: 248px;
            margin: 0 auto;
        }
        .shuru input{
            width: 460px;
            height: 56px;
            border-radius: 30px;
            padding-left: 15px;
            font-size: 18px;
            margin-bottom: 20px;
            outline: none;
        }
        .gouxuan{
            width: 480px;
            height: 20px;
            /* /* background-color: red; */
        } 
        #zi_dong_deng_lu{
            width: 16px;
            height: 16px;
        
        }
        label{
            padding-left: 120px;
        }
        label a{
            height: 20px;
            display: inline-block;
            line-height: 20px;
            color: gray;
            padding-left: 20px;
        }
        label a:hover{
            color: orange;
            text-decoration: underline;
        }
        .anniu{
            width: 480px;
            height: 56px;
            /* background-color: green; */
            margin: 0 auto;
            margin-top: 20px;
        }
        .dianjianniu input{
            width: 240px;
            height: 56px;
            background-color:#db432e;
            border-radius: 30px;
            margin-left: 110px;
            font-size: 24px;
            color:#fff;
            border: 0;

            
        }
        /* 注册结束 */
    </style>
</head>
<body>
    <!-- 导航开始 -->
    <div class="zhuce_nav">
        <div class="nav">
            <div class="logo"><img src="../img/logo.png"></div>
              <ul type="none" class="main_nav">
                 <li><a href="#">首页</a></li>
                 <li><a href="#">菜谱大全</a></li>
                 <li><a href="#">饮食健康</a></li>
                 <li><a href="#">美食菜单</a></li>
                 <li><a href="#">美食达人</a></li>
                 <li><a href="#">菜谱视频</a></li>
                 <li><a href="#">产品下载</a></li>
             </ul>
        </div>
    </div>
    <!-- 导航结束 -->

    <!-- 标题开始 -->
   <div class="title">欢迎来到美食杰</div>
    <!-- 标题结束 -->
    <!-- 登陆注册  开始 -->
    <div class="reg">
        <div class="reg_center">
            <div class="reg_title">
                <a href="#">手机号登陆</a>
                |
                <a href="#">账号密码登录</a>
            </div>
            <div class="shuru">
                <form action="#">
                    <input type="text" placeholder="请输入账号"><br>
                    <input type="password" placeholder="请输入密码"><br>
                    <div class="gouxuan">
                        <label for="zi_dong_deng_lu">
                            <input type="checkbox" class="checkone" id="zi_dong_deng_lu"> 下次自动登录
                            <a href="#">忘记密码?</a>
                        </label>
                    </div>
                    <div class="anniu">
                        <div class="dianjianniu">
                            <input type="submit" value="注册" >
                        </div>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
    <!-- 登陆注册  结束 -->
</body>
</html>